<template>
  <div>
    <!-- 文章列表 -->
    <ArticleList :articles="articleList" @followArtilce="followArtilce" @cancelFollowArtilce="cancelFollowArtilce"/>
    <!-- 页码 -->
    <Pagination :totalArticle="totalArticle" :pageSize="pageSize" :currentPage="currentPage" @pageActiveClick="pageActiveClick"/>
  </div>
</template>

<script>
import ArticleList from "../../components/ArticleList"
import Pagination from '../../components/Pagination'
import { getArticle, changePage } from "../../utils/mixin"
import {reqFollowArticle, reqUnFollowArticle} from '../../api/article'
import marked from 'marked'
import {reqHomeArtical} from '../../api/home'
export default {
  name: "MyArticlesPages",
  data() {
    return {
      article:{
        tag: null,
        author: null,
        favorited: null,
      },
      currentPage: 1,
      pageSize: 10,
      // 文章总数量
      totalArticle: 0,
      articleList: [],
    };
  },
  methods: {
    // 获取文章数据
     async getUserArtical() {
      const result = await reqHomeArtical(this.article, this.pageSize, this.currentPage)
      // console.log(result)
      
      this.articleList = this.changeData(result.articles)
      // 文章总数量
      this.totalArticle = result.articlesCount;
    },

    // 将markdown转换为HTML
    changeData(data){
      let result = data.map(item => {
        item.body = marked(item.body)
        return item
      })
      return result
    },
    
    // 页码active
    pageActiveClick(i){
      this.pageActive(i)
      // 重新发送请求
      this.getUserArtical()
    },

    // 取消收藏文章
    cancelFollowArtilce(obj){
      console.log(obj)
    },

    // 收藏文章
    async followArtilce(obj){
      const result = await reqFollowArticle(obj.slug)
      this.articleList[obj.index] = result.article
      console.log(this.articleList)
    }
  },
  created() {
    this.article.author = this.$route.params.uid;
    this.getUserArtical();
  },
  watch: {
    "$route.path"() {
      this.article.author = this.$route.params.uid;
      this.getUserArtical();
    },
    "this.articleList"(){
      console.log(this.getUserArtical())
    }
  },
  components: {
    ArticleList,
    Pagination
  }
};
</script>
<style lang="less" scoped></style>
